<template>
  <div class="height100" style="padding: 2em;box-sizing: border-box">
    <el-scrollbar>
      <div class="title">absolute绝对布局</div>
      <div class="detail">外边框使用<span class="highlight">ls-abs-outer</span>来相对定位</div>
      <div class="detail">内边框使用<span class="highlight">ls-abs-inner</span>来绝对定位</div>
      <div class="ls-abs-outer bigBox">
        <div class="ls-abs-inner smallBox"></div>
      </div>
      <div class="title">flex布局</div>
      <div class="detail">外边框使用<span class="highlight">ls-flex ls-flex-center ls-flex-centerV</span>来相对定位</div>
      <div class="ls-flex ls-flex-center ls-flex-centerV bigBox">
        <div class="smallBox"></div>
      </div>
      <div class="title">flex自动换行</div>
      <div class="detail">外边框使用<span class="highlight">ls-flex-wap</span>来换行</div>
      <div class="ls-flex-wap middleBox">
        <div v-for="(item,index) in 6" :key="index" class="miniBox" style="margin:5px 10px">{{ item }}</div>
      </div>
      <div class="detail">外边框使用<span class="highlight">ls-flexV-wap</span>来换行</div>
      <div class="ls-flexV-wap middleBox">
        <div v-for="(item,index) in 6" :key="index" class="miniBox" style="margin:5px 10px">{{ item }}</div>
      </div>
      <div class="title">flex对齐方式</div>
      <div class="detail">外边框使用<span class="highlight">ls-flex ls-flex-end</span>来对齐主轴</div>
      <div class="ls-flex ls-flex-end middleBox">
        <div v-for="(item,index) in 2" :key="index" class="miniBox" style="margin:5px 10px">{{ item }}</div>
      </div>
      <div class="detail">外边框使用<span class="highlight">ls-flex ls-flex-endV</span>来对齐交叉轴</div>
      <div class="ls-flex ls-flex-endV middleBox">
        <div v-for="(item,index) in 2" :key="index" class="miniBox" style="margin:5px 10px">{{ item }}</div>
      </div>
      <div class="detail">外边框使用<span class="highlight">ls-flex ls-flex-between</span>来对齐主轴</div>
      <div class="ls-flex ls-flex-between middleBox">
        <div v-for="(item,index) in 2" :key="index" class="miniBox" style="margin:5px 10px">{{ item }}</div>
      </div>
      <div class="detail">外边框使用<span class="highlight">ls-flex ls-flex-around</span>来对齐主轴</div>
      <div class="ls-flex ls-flex-around middleBox">
        <div v-for="(item,index) in 2" :key="index" class="miniBox" style="margin:5px 10px">{{ item }}</div>
      </div>
      <div class="title">flex子项属性</div>
      <div class="detail">外边框<span class="highlight">ls-flex ls-flex-unShrink</span>来批量设置不缩小</div>
      <div class="detail">内边框2使用<span class="highlight">ls-flexItem-grow</span>来占据剩余空间</div>
      <div class="ls-flex-wap ls-flex-unShrink ls-flex-centerV middleBox">
        <div class="miniBox" style="margin:5px 10px">1</div>
        <div class="miniBox ls-flexItem-grow" style="margin:5px 10px">2</div>
        <div class="miniBox" style="margin:5px 10px">3</div>
      </div>
      <div class="title">文本超出长度后显示省略号，使用<span class="highlight">ls-text-unWarp</span>来省略</div>
      <div class="textBox ls-text-unWarp" title="这是一个比较长的测试文字">这是一个比较长的测试文字</div>
      <div class="title">文本居中显示，使用<span class="highlight">ls-text-center</span>来居中</div>
      <div class="textBox ls-text-center">居中显示</div>
      <div class="title">文本间隔一行<span class="highlight">ls-text-line</span></div>
      <div style="border:var(--el-border-base)">
        <div class="textBox ls-text-line">我上下有一行</div>
      </div>
      <div class="title">文本间隔半行<span class="highlight">ls-text-halfLine</span></div>
      <div style="border:var(--el-border-base)">
        <div class="textBox ls-text-halfLine">我上下有半行</div>
      </div>
      <div class="title">面板样式<span class="highlight">ls-panel</span>，面板带有圆角，阴影和边框</div>
      <div class="middleBox ls-panel" style="background-color: white">
      </div>
      <div class="title">鼠标悬浮样式<span class="highlight">ls-text-hover</span>鼠标移上去后变成蓝色</div>
      <div class="textBox ls-text-hover">鼠标移上去</div>
      <div class="title">宽度100%<span class="highlight">width100</span>观察蓝色部分占比</div>
      <div class="textBox ls-flex">
        <div style="width: 50%">
          <div style="width: 1em;height: 1em;background-color: #0d84ff">1em</div>
        </div>
        <div style="width: 50%">
          <div class="width100" style="height: 1em;background-color: #0d84ff">100%</div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'ls-css-test',
})
</script>

<style scoped>
.title {
  color: var(--el-text-color-primary);
  margin: 1em 0;
}

.detail {
  color: var(--el-text-color-regular);
  margin: 1em 0;
  font-size: 14px;
}

.highlight {
  color: var(--el-color-warning);
  margin: 0 0.3em;
}

.bigBox {
  background-color: var(--el-color-info);
  width: 300px;
  height: 300px;
}

.smallBox {
  background-color: var(--el-color-danger);
  width: 200px;
  height: 200px;
}

.middleBox {
  background-color: var(--el-color-info);
  width: 300px;
  height: 150px;
}

.miniBox {
  background-color: var(--el-color-danger);
  width: 45px;
  height: 45px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.textBox{
  width: 8em;
  background-color: var(--el-color-info);
}
</style>
